<template lang="pug">
.cp-plan-edit
  el-dialog(:title="title", :visible="visible", width="60%", @close="close", :close-on-click-modal="false")
    el-form.pt-form(:inline="true", label-width="72px")
      el-row(:gutter="36")
        el-col(:span="8")
          el-form-item.is-required(label="创建人")
            el-select(v-model="formData.creator", placeholder="请选择")
              el-option(v-for="item in empSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item.is-required(label="供应商")
            el-select(v-model="formData.supply", placeholder="请选择")
              el-option(v-for="item in supplySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item.is-required.long-item(label="采购申请单号", label-width="96px")
            el-button(type="text", @click="showSkuList", v-text="formData.incode ? formData.incode : '选择物料'")
      el-row(:gutter="36")
        el-col(:span="8")
          el-form-item(label="物料名称")
            el-input(:value="formData.name", :disabled="true")
        el-col(:span="8")
          el-form-item(label="物料属性")
            el-input(:value="formData.crsprop | compare-list(skuPropSelect)", :disabled="true")
        el-col(:span="8")
          el-form-item(label="状态")
            el-select(v-model="formData.status", placeholder="选择物料自动带出", :disabled="true")
              el-option(v-for="item in statusSelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="36")
        el-col(:span="8")
          el-form-item(label="型号规格")
            el-input(:value="formData.size", :disabled="true")
        el-col(:span="8")
          el-form-item(label="物料分级")
            el-input(:value="formData.crslevel | compare-list(skuLevelSelect)", :disabled="true")
        el-col(:span="8")
          el-form-item(label="物料类别")
            el-input(:value="formData.crstype | compare-list(crsTypeSelect)", :disabled="true")
      el-row(:gutter="36")
        el-col(:span="8")
          el-form-item(label="基本单位")
            el-select(v-model="formData.unit", placeholder="选择物料自动带出", :disabled="true")
              el-option(v-for="item in unitSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="BOM版本")
            el-input(:value="formData.bom", :disabled="true")
    h3.pt-title
      strong 单价维护列表
      span(@click="addPrice", v-show="!formData.prices.length") 初始化行
    .pt-table
      el-table(:data="formData.prices", highlight-current-row, size="mini")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="price", label="单价(不含税)", min-width="128px")
          template(slot-scope="scope")
            el-input(v-model="scope.row.price", v-show="scope.row.isEdit")
            span(v-text="scope.row.price", v-show="!scope.row.isEdit")
        el-table-column(align="center", show-overflow-tooltip, prop="currency", label="币种")
          template(slot-scope="scope")
            el-select(v-model="scope.row.currency", placeholder="请选择", v-show="scope.row.isEdit")
              el-option(v-for="item in currencySelect", :key="item.value", :label="item.name", :value="item.value")
            span(v-show="!scope.row.isEdit") {{ scope.row.currency | compare-list(currencySelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
          template(slot-scope="scope")
            el-select(v-model="scope.row.status", placeholder="请选择", v-show="scope.row.isEdit")
              el-option(v-for="item in statusSelect", :key="item.value", :label="item.name", :value="item.value")
            span(v-show="!scope.row.isEdit") {{ scope.row.status }}
        el-table-column(align="center", label="操作", width="96px")
          template(slot-scope="scope")
            el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editPrice(scope.$index)")
              i.icon-act.el-icon-edit
            el-tooltip(content="添加", v-show="!scope.row.isEdit", @click.native="addPrice(scope.$index)")
              i.icon-act.el-icon-plus
            el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deletePrice(scope.$index)")
              i.icon-act.el-icon-delete
            el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertPrice(scope.$index)")
              i.icon-act.el-icon-check
            el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="canclePrice(scope.$index)")
              i.icon-act.el-icon-close
    .pt-btns
      el-button.dia-btn(type="primary", plain, @click="close") 取消
      el-button.dia-btn.dia-after(type="primary", @click="savePlan") 确定
  MaterielList(
    :visible="showMaterielList",
    v-if="showMaterielList",
    :vendor="formData.supply",
    @submit="handleSelect",
    @close="showMaterielList=false")
</template>

<script>
import { mapGetters } from 'vuex';
import MaterielList from '@/components/materiel/materielList';
import validate from '@/utils/validate';
// import check from './check';

const { isEmpty } = validate;

export default {
  name: 'planedit',
  props: {
    title: {
      type: String,
      default: '编辑单价维护'
    },
    visible: Boolean,
    formData: {
      type: Object,
      default () {
        return {
          prices: []
        };
      }
    }
  },
  components: {
    MaterielList
  },
  watch: {
    formData () {
      if (!this.formData.creator) {
        this.formData.creator = this.employeeId;
      }
    }
  },
  data() {
    return {
      showMaterielList: false,
      statusSelect: [
        { value: '0', name: '启动' },
        { value: '1', name: '禁用' }
      ],
      mateBC: []
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    savePlan () {
      if (!this.formData.order) {
        this.formData.status = null;
      }
      // const canEmit = check(this.formData);
      // if (canEmit) {
      this.$emit('save', this.formData);
      // }
    },
    // 显示物料列表
    showSkuList () {
      if (isEmpty(this.formData.supply)) {
        this.$message.info('请先选择供应商');
        return;
      }
      this.showMaterielList = true;
    },
    // 选择物料
    handleSelect(data) {
      console.log(data);
      this.formData.incode = data.skuId;
      this.formData.name = data.skuName;
      this.formData.maker = data.skuBrand;
      this.formData.size = data.skuSpecification;
      this.formData.bom = data.bomVersion;
      this.formData.unit = data.skuUnit;
      this.formData.status = data.skuStatus;
      this.formData.crstype = data.skuCategory;
      this.formData.crsprop = data.skuProperty;
      this.formData.crslevel = data.skuGrade;

      this.showMaterielList = false;
    },
    // 监听物料列表
    addPrice (index) {
      if (isEmpty(index)) {
        this.formData.prices.push({ isEdit: true });
      } else {
        this.formData.prices.splice((index + 1), 0, { isEdit: true });
      }
    },
    editPrice (index) {
      this.mateBC[index] = Object.assign({}, this.formData.prices[index]);
      this.$set(this.formData.prices[index], 'isEdit', true);
    },
    deletePrice (index) {
      this.formData.prices.splice(index, 1);
      this.mateBC[index] = null;
    },
    insertPrice (index) {
      this.formData.prices[index].isEdit = false;
    },
    canclePrice (index) {
      if (this.mateBC[index]) {
        this.$set(this.formData.prices, `${index}`, this.mateBC[index]);
      } else {
        this.deletePrice(index);
      }
    }
  },
  computed: {
    ...mapGetters(['empSelect', 'crsTypeSelect', 'supplySelect', 'skuPropSelect', 'skuLevelSelect', 'unitSelect', 'employeeId', 'currencySelect'])
  }
};
</script>

<style lang="sass">
.cp-plan-edit
  .pt-title
    font-size: 14px
    margin-top: 16px
    margin-left: 16px
    margin-bottom: 6px
    span
      margin-left: 8px
      color: #409EFF
      font-size: 13px
  .pt-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
    .long-item
      .el-form-item__content
        width: calc(100% - 96px)
  .pt-table
    margin-bottom: 16px
    min-height: 144px
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .pt-btns
    margin-top: 8px
    text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
</style>
